<!DOCTYPE html>
<html>
<head>
	<title>system</title>
	<script src="/js/sweetalert.min.js"></script>
	<link href="/style/bootstrap.min.css" rel="stylesheet">
	<script src="/js/jquery.min.js"></script>
	<script src="/js/bootstrap.min.js"></script>
	<script src="/js/vue.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/style/admin.css">
	<link href="/style/sweetalert.min.css" rel="stylesheet">
	<style type="text/css">
		[v-cloak] {
		display: none;
		} 
	</style>
</head>
<body>
<div id="app" v-cloak>


	<nav class="navbar navbar-default" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<a class="navbar-brand" href="#">药物进存销系统 -- <b>检查业务</b></a>
			</div>
			<div>
				<ul class="nav navbar-nav" style="float:right;">
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							{{accountName}}
							<b class="caret"></b>
						</a>
						<ul class="dropdown-menu" style="left:auto;right:0;min-width:100px">
							<li v-on:click="showChangePassword()" style="height:40px;"><a href="#" style="line-height: 40px">更改密码</a></li>
							<li v-on:click="logout" style="height:40px;"><a href="#" style="line-height: 40px">退出登录</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</nav>

	<h2 style="margin-left: 20px;">检查员：{{accountName}}</h2>

	<div style="margin: 20px;">
		<ul class="nav nav-tabs">
			<li v-bind:class="{ active: menu=='medicine' }"><a v-on:click="changeMenu('medicine')" style="cursor: pointer">药品区</a></li>
			<li v-bind:class="{ active: menu=='table' }"><a v-on:click="changeMenu('table')" style="cursor: pointer">我的账单</a></li>
		</ul>
		<div style="min-height: 300px;border:1px solid #ddd;border-top: 0px;">
			<div v-if="panel=='medicine'">
				<div class="me-container">
					<div class="me-search">
						<div class="row">
							<div>
								<div class="input-group">
									<input type="text" class="form-control" v-model="searchMedicineName">
									<span class="input-group-btn">
										<button class="btn btn-default" type="button" v-on:click="searchMedicine">
										搜索药品
										</button>
									</span>
								</div><!-- /input-group -->
							</div><!-- /.col-lg-6 -->
						</div><!-- /.row -->
					</div>
					<div v-for="me in medicineShow" class="me-cube">
						<div class="me-img-con">	
							<img style="cursor: pointer;"  v-on:click="viewMedicine(me)" class="img-responsive" :src="me.imgurl">
						</div>
						<div>
							<span class="me-text" v-on:click="viewMedicine(me)">{{me.name}}</span><span class="me-amout">{{me.amout}}</span><button v-on:click="operateMedicine(me)" type="button" style="float:right" class="btn btn-info btn-xs">销毁</button>
						</div>
					</div>
				</div>
				<div class="div-middle">
					<span style="vertical-align: middle;">页数： </span>
					<ul class="pagination" style="vertical-align: middle;">
					    <li v-for="n in Math.ceil(medicine.length/20)" v-bind:class="{ active: medicinePage==n }"><a v-on:click="changePage('medicine',n)">{{n}}</a></li>
					</ul>
				</div>
			</div>
			<div v-else>
				<div class="me-table-con">
					<table class="table table-striped">
						<thead>
							<tr>
								<th>药品</th>
								<th>操作类型</th>
								<th>数目</th>
								<th>时间</th>
								<th></th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="bi in billShow">
								<td>{{bi.medicine_name}}</td>
								<td>{{bi.type == 'damage'?'销毁':'不明'}}</td>
								<td>{{-bi.amout}}</td>
								<td>{{new Date(bi.create_time).toLocaleString()}}</td>
								<td><a style="cursor: pointer;" v-on:click="viewBill(bi)">查看详情</a></td>
							</tr>
						</tbody>
					</table>
				</div>

				<div class="div-middle">
					<span style="vertical-align: middle;">页数： </span>
					<ul class="pagination" style="vertical-align: middle;">
					    <li v-for="n in Math.ceil(bill.length/20)" v-bind:class="{ active: billPage==n }"><a v-on:click="changePage('bill',n)">{{n}}</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="medicineModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						药品信息
					</h4>
				</div>
				<div class="modal-body">
					<div>
						<div style="display: inline-block;width: 200px;height: 150px;overflow: hidden;vertical-align: top"><img :src="viewMedicineMsg.imgurl" class="img-responsive"></div>
						<div style="display: inline-block;width: 350px;vertical-align: top">
							<table class="table">
								<tbody>
									<tr>
										<td style="width: 30%">药品名称</td>
										<td> {{viewMedicineMsg.name}}</td>
									</tr>
									<tr>
										<td style="width: 30%">药品价格</td>
										<td>{{viewMedicineMsg.price}}</td>
									</tr>
									<tr>
										<td style="width: 30%">药品数量</td>
										<td>{{viewMedicineMsg.amout}}</td>
									</tr>
									<tr>
										<td style="width: 30%">生产时间</td>
										<td>{{new Date(viewMedicineMsg.producetime*1000).toLocaleDateString()}}</td>
									</tr>
									<tr>
										<td style="width: 30%">保质期长</td>
										<td>{{viewMedicineMsg.abletime/(30*24*3600)}}个月</td>
									</tr>
									<tr>
										<td style="width: 30%">有效期至</td>
										<td>{{new Date(viewMedicineMsg.producetime*1000+viewMedicineMsg.abletime*1000).toLocaleDateString()}}</td>
									</tr>
									<tr>
										<td style="width: 30%">药品介绍</td>
										<td>{{viewMedicineMsg.introduce}}</td>
									</tr>
									<tr>
										<td style="width: 30%">生产公司</td>
										<td>{{viewMedicineMsg.company}}</td>
									</tr>
									<tr>
										<td style="width: 30%">生产地址</td>
										<td>{{viewMedicineMsg.address}}</td>
									</tr>
									<tr>
										<td style="width: 30%">公司电话</td>
										<td>{{viewMedicineMsg.phone}}</td>
									</tr>
									<tr>
										<td style="width: 30%">药品编码</td>
										<td>{{viewMedicineMsg.code}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
	<div class="modal fade" id="billModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						账单详细内容
					</h4>
				</div>
				<div class="modal-body">
					<table class="table">
						<tbody>
							<tr>
								<td>卖出时间</td>
								<td>{{new Date(viewBillMsg.create_time).toLocaleString()}}</td>
							</tr>
							<tr>
								<td>卖出人员</td>
								<td>{{viewBillMsg.clerk_name}}</td>
							</tr>
							<tr>
								<td>卖出类型</td>
								<td>{{viewBillMsg.type == 'damage'?'销毁':'不明'}}</td>
							</tr>
							<tr>
								<td>卖出药品</td>
								<td>{{viewBillMsg.medicine_name}}</td>
							</tr>
							<tr>
								<td>卖出数量</td>
								<td>{{-viewBillMsg.amout}}</td>
							</tr>
							<tr>
								<td>卖出信息</td>
								<td>{{viewBillMsg.message}}</td>
							</tr>
							<tr>
								<td>卖出备注</td>
								<td>{{viewBillMsg.remarks}}</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>

	<div class="modal fade" id="operateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						销毁<span style="color: red">{{operateMedicineMsg.name}}</span>
					</h4>
				</div>
				<div class="modal-body">
					<table class="table operate-table">
						<tbody>
							<tr>
								<td>数量</td>
								<td><input  class="form-control operate-input" v-model="operateAmout" type="number" placeholder="输入数量"></td>
							</tr>
							<tr>
								<td>备注</td>
								<td><input  class="form-control operate-input" v-model="operateRemark" type="text" placeholder="输入备注"></td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="modal-footer">
					<button v-on:click="operate" type="button" class="btn btn-success" style="width: 100px;margin-left: 105px;">确认</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>

	<div class="modal fade" id="passwordModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width: 350px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						修改密码
					</h4>
				</div>
				<div class="modal-body">
					<input class="form-control change-password" v-model="oldPassword" type="password" placeholder="输入旧密码">
					<input class="form-control change-password" v-model="newPassword" type="password" placeholder="输入新密码">
				</div>
				<div class="modal-footer">
					<button v-on:click="changePassword" type="button" class="btn btn-success" style="width: 100px;margin-left: 105px;">保存</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>

</div>



<script type="text/javascript" src="./js/check.js"></script>
</body>
</html>